<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
      <router-link to="/FuelCostList">油费管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>油费显示</el-breadcrumb-item>
 </el-breadcrumb></div>
    <!-- 查询 -->
     <el-form :inline="true" :model="forms" class="demo-form-inline">
    <el-form-item label="车牌号:">
      <el-input v-model="forms.LicensePlateNumber" placeholder="请输入车牌号" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="经办人：">
     <el-select v-model="forms.HandledBy" placeholder="请选择经办人" clearable style="width: 150px;">
        <el-option v-for="item in ListfuelCost" :label="item.handledBy" :value="item.handledBy" />
       
      </el-select>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="getListfuelCost" >查询</el-button>
          <el-button type="primary" @click="reset()" >重置</el-button>
    </el-form-item>
  </el-form> 
  <!-- 显示列表 -->
       <el-button type="primary" @click="CreateFuelCost" >新增</el-button>
           <el-button type="danger" @click="getDelAllFuelCost" >删除</el-button>
                 <el-button type="success" @click="getExport" >导出</el-button>
     <el-table :data="ListfuelCost" border style="width: 100%" ref="multipleTableRef"  @selection-change="handleSelectionChange">
       <el-table-column type="selection"  width="55" />
        <el-table-column prop="licensePlateNumber" label="车牌号" align="center" />
          <el-table-column prop="fuelCostPerLiter" label="加油费用/元" align="center" />
             <el-table-column prop="startingKilometers" label="起始公里数" align="center" />
     <el-table-column prop="payMethod" label="支付方式" align="center" >
        <template v-slot="scoped">
             <el-tag type="primary" v-if="scoped.row.payMethod==1">微信支付</el-tag>
    <el-tag type="success" v-if="scoped.row.payMethod==2">支付宝支付</el-tag>
    <el-tag type="info" v-if="scoped.row.payMethod==3">银联支付</el-tag>
    <el-tag type="warning" v-if="scoped.row.payMethod==4">企业转账</el-tag>
    <el-tag type="danger" v-if="scoped.row.payMethod==5">线下支付</el-tag>
     <el-tag type="danger" v-if="scoped.row.payMethod==6">{{ scoped.row.otherPayMethod }}</el-tag>
        </template>
     </el-table-column>
       <el-table-column prop="handledBy" label="经办人" align="center" />

           <el-table-column prop="fuelCostNotes" label="备注" align="center" >
             <template v-slot="scope">
<span v-if="scope.row.fuelCostNotes==''">-</span>
    </template>
           </el-table-column>
            <el-table-column prop="createdDate" label="创建时间" align="center" >
                 <template v-slot="scope">
<span>{{ scope.row.createdDate.replace("T"," ").substring(0,19) }}</span>
    </template>
            </el-table-column>
             <el-table-column prop="date" label="操作" align="center">
  <template v-slot="scope">
    <!-- 编辑操作 -->
    <div class="table-operation" >
      <el-icon class="operation-icon"><EditPen /></el-icon>
      <span class="operation-text" @click="edit(scope.row.fuelCostId)">编辑</span>
    </div>
 
    <!-- 删除操作 -->
    <div class="table-operation" style="margin-top: 8px;" >
      <el-icon class="operation-icon"><CloseBold /></el-icon>
      <span class="operation-text" @click="del(scope.row.fuelCostId)">删除</span>
    </div>
 
    <!-- 查看操作 -->
    <div class="table-operation" style="margin-top: 8px;">
      <el-icon class="operation-icon"><CircleCheck /></el-icon>
      <span class="operation-text" @click="ed(scope.row.fuelCostId)">查看</span>
    </div>
  </template>
  
</el-table-column>
            
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">

    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[3, 6, 9, 11]"
        style="float: right;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    <!-- 查看油费信息 -->
   <div>
    <el-dialog
    v-model="dialogVisible1"
    title="油费信息"
    width="500"
  >
   <el-form ref="ruleFormRef" style="max-width: 600px" :model="formm"  label-width="auto"
        class="demo-ruleForm"  status-icon>
        <el-form-item label="车牌号：" prop="licensePlateNumber">
            <el-input v-model="formm.licensePlateNumber" placeholder="请输入车牌号" />
        </el-form-item>
       
        <el-form-item label="加油费用/元:" prop="fuelCostPerLiter">
            <el-input v-model="formm.fuelCostPerLiter" placeholder="请输入加油费用" />
        </el-form-item>
       
        <el-form-item label="加油量/L:" prop="refuelingQuantity">
            <el-input v-model="formm.refuelingQuantity" placeholder="请输入加油量" />
        </el-form-item>
       <el-form-item label="起始公里数:" prop="startingKilometers">
            <el-input v-model="formm.startingKilometers" placeholder="请输入起始公里数" />
        </el-form-item>
               <el-form-item label="支付方式:" prop="payMethod">
            <el-radio-group v-model="formm.payMethod">
      <el-radio :value="1" size="large">微信支付</el-radio>
      <el-radio :value="2" size="large">支付宝支付</el-radio>
      <el-radio :value="3" size="large">银联支付</el-radio>
      <el-radio :value="4" size="large">企业转账</el-radio>
      <el-radio :value="5" size="large">线下支付</el-radio>
      <div>
          <el-radio :value="6" size="large">其他</el-radio>
        <el-input v-if="formm.payMethod == '6'" v-model="formm.otherPayMethod" placeholder="请输入其他支付方式" />
      </div>
    </el-radio-group>
        </el-form-item>
               <el-form-item label="经办人:" prop="handledBy">
            <el-input v-model="formm.handledBy" placeholder="请输入经办人" />
        </el-form-item>
       
        <el-form-item label="备注:" prop="fuelCostNotes">
            <el-input v-model="formm.fuelCostNotes" type="textarea" placeholder="请输入备注" />
        </el-form-item>
         
    </el-form>
    <template #footer>
      <div class="dialog-footer">
       
        <el-button type="primary" @click="dialogVisible1 = false">
          关闭
        </el-button> 
      </div>
    </template>
  </el-dialog>
   </div>
</template>
<script setup lang="ts">
//查看信息
const dialogVisible1 = ref(false)
const formm= reactive({
 "licensePlateNumber": "",
  "fuelCostPerLiter": "",
  "refuelingQuantity": "",
  "startingKilometers": "",
  "payMethod": "",
  "otherPayMethod": "",
  "handledBy": "",
  "fuelCostNotes": "",
 
})
const ed = (id:number) => {
    axios.get("/bwrite/api/FuelCost/GetFuelCostBy?FuelCostId=" + id).then(ter => {
        formm.licensePlateNumber = ter.data.data.licensePlateNumber
       
       formm.fuelCostPerLiter = ter.data.data.fuelCostPerLiter
       formm.refuelingQuantity = ter.data.data.refuelingQuantity
       formm.startingKilometers = ter.data.data.startingKilometers
        formm.payMethod = ter.data.data.payMethod
       formm.otherPayMethod = ter.data.data.otherPayMethod
       formm.handledBy = ter.data.data.handledBy
       formm.fuelCostNotes = ter.data.data.fuelCostNotes
    })
   dialogVisible1.value = true
}
//分页
const handleSizeChange = (val: number) => {
    page.PageSize = val
  getListfuelCost()
}
const handleCurrentChange = (val: number) => {
    page.PageIndex = val  
  getListfuelCost()
}
//图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
    Star,
    CloseBold,
    EditPen,
  CircleCheck
} from '@element-plus/icons-vue'
//多选
const multipleSelection = ref([])
const multipleSelections = ref([])//接收整条数据
const handleSelectionChange = (val: any) => {
    multipleSelection.value=(val.map(d=>d.fuelCostId))
    multipleSelections.value=val
   console.log(multipleSelection.value) //多选的id
  
}

//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//变量
const forms=reactive({
    LicensePlateNumber: "",
    HandledBy: "",
   
})
//分页
const page=reactive({
    PageIndex: 1,
    PageSize: 3,
    pageCount: 0,
    totalCount:0
})
//方法
//显示经办人方法
const ListHandledBy: any = ref([])
const getListHandledBy = () => {
axios.get("/bread/api/FuelCosts/GetFuelCostGetHandled").then(res => {
    ListHandledBy.value = res.data.data
})
}
const form:any=reactive({
  buttonArray:[]
})
//根据菜单id查询按钮功能权限
const getRoleMenuFun=()=>{
  axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
    params: {
      menuId:route.query.id
    }
  }).then(res=>{
    console.log(res);
    form.buttonArray=res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}
//显示油费方法
const ListfuelCost: any = ref([])
const getListfuelCost = () => {
    axios.get("/bread/api/FuelCosts/GetLinesAll", {
        params: {
            LicensePlateNumber: forms.LicensePlateNumber,
            HandledBy: forms.HandledBy,
            PageIndex: page.PageIndex,
            PageSize:page.PageSize,
        }
    }).then(ter => {
        ListfuelCost.value = ter.data.data.list
     console.log(ter.data)
        page.pageCount = ter.data.data.pageCount
        page.totalCount = ter.data.data.totalCount
      
    
    }).catch(err => {
        console.log(err);
    })
}

//删除（单删）
import { ElMessage, ElMessageBox } from 'element-plus'
const del = (id:number) => {
     ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
        axios.post("/bwrite/api/FuelCost/DeleteFuelCost?FuelCostId="+id).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
            getListfuelCost()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//新增油费跳转
const CreateFuelCost = () => {
    router.push("/CreateFuelCost")
}
//导出
import * as XLSX from 'xlsx';// 导出Excel
const getExport = () => {
  // let url = '/bread/api/CargoOwners/GetExcelName?CargoOwnerName='+forms.CargoOwnerName+'&CargoOwnerPhone='+forms.CargoOwnerPhone+'&DriverLicenseDate='+forms.DriverLicenseDate+'&PageIndex='+page.PageIndex+'&PageSize='+page.PageSize
  // window.location.href = url;
    ElMessageBox.confirm("是否确认导出当前选择的数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
    .then((response) => {
        //  this.selectdata 是复选框的 数据列表
        if (multipleSelections.value.length <= 0) {
            ElMessage.warning('请选择数据！');
            return;
        }
        let tableData = [
            ['序号','车牌号','加油费用/元', '起始公里数', '支付方式', '经办人', "备注", "创建时间"]//导出表头
        ] // 表格表头
        multipleSelections.value.forEach((item, index) => {
            let rowData= []
            //导出内容的字段
            rowData = [
                index + 1, 
                item.licensePlateNumber,
                item.fuelCostPerLiter,
                item.startingKilometers,
                item.payMethod=="1"?"微信支付":item.payMethod=="2"?"支付宝支付":item.payMethod=="3"?"银联支付":item.payMethod=="4"?"企业转账":item.payMethod=="5"?"线下支付":item.payMethod=="6"?item.otherPayMethod:"",
                item.handledBy,
                item.fuelCostNotes,
              
                item.createdDate,
            ]
            tableData.push(rowData)
        })
        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
        let bookNew = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 工作簿名称
        let name = '油费信息表' + timeFormat() + '.xlsx'
        XLSX.writeFile(bookNew, name) // 保存的文件名
    })
}
const timeFormat=()=> {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        return year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
const addZero=(num:any)=> {
    return num < 10 ? '0' + num : num
}
//删除（多删）
const getDelAllFuelCost = () => {
    if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的线路')
        return
    }
      ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
          .then(() => {

              axios.post("/bwrite/api/FuelCost/DeleteAllFuelCost", {
            fuelCostIds:multipleSelection.value
        }).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
                 getListfuelCost()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//修改线路
const edit = (id:number) => {
    router.push({
        path: "/UpdateFuelCost",
        query: {
            id:id
        }
    })
}
//重置查询条件
const reset = () => {
     forms.LicensePlateNumber="",
    forms.HandledBy=""
    getListfuelCost()
}
//钩子函数
onMounted(async() => {
    getListfuelCost()
  getListHandledBy()
   getRoleMenuFun()
})
</script>
<style scoped>
.table-operation {
  display: flex;
  align-items: center;
}
 
.operation-icon {
  color: blue;
  margin-right: 8px; /* 图标和文本之间的间距 */
}
 
.operation-text {
  color: blue;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}
</style>